<template>
  <div>
    <el-dialog
      title="新增用户"
      :visible.sync="dialogFormVisible"
      width="30%"
      style="text-align: left"
    >
      <table style="font-weight: bold">
        <tr>
          <td>
            <label for="label_11"
              >姓名: <span style="color: red">*</span></label
            >
          </td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="name"
              id="label_11"
              style="width: 250px"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td>
            <label for="label_12"
              >用户名: <span style="color: red">*</span></label
            >
          </td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="username"
              id="label_12"
              style="width: 250px"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td>
            <label for="label_13"
              >密码: <span style="color: red">*</span></label
            >
          </td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="password"
              id="label_13"
              style="width: 250px"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td><label for="label_17">角色:</label></td>
          <td>
            <el-select v-model="role_id" placeholder="请选择" id="label_17">
              <el-option
                v-for="item in role_name_options"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>
            <label for="label_18"
              >分组名: <span style="color: red">*</span></label
            >
          </td>
          <td>
            <el-select v-model="group_id" placeholder="请选择" id="label_18">
              <el-option
                v-for="item in group_id_options"
                :key="item.id"
                :value="item.id"
                :label="item.group_name"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>
            <label for="label_14"
              >联系方式: <span style="color: red">*</span></label
            >
          </td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="phone"
              id="label_14"
              style="width: 250px"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td><label for="label_15">QQ:</label></td>
          <td>
            <el-input
              type="input"
              placeholder="请输入内容"
              v-model="qq"
              id="label_15"
              style="width: 250px"
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td><label for="label_16">状态:</label></td>
          <td>
            <el-select v-model="status" placeholder="请选择" id="label_16">
              <el-option
                v-for="item in status_options"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                style="width: 250px"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
      </table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddUser">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
var md5 = require("js-md5");
export default {
  name: "AddUser",
  data() {
    return {
      dialogFormVisible: false,
      name: "",
      username: "",
      password: "",
      phone: "",
      qq: "",
      status: "1", // 默认启用
      role_id: 5, // 默认员工
      status_options: [
        { value: "1", label: "启用" },
        { value: "2", label: "禁用" },
      ],
      role_name_options: "",
      group_id: "",
      group_id_options: [],
    };
  },
  methods: {
    handleCheckIsNull() {
      let errMsg = "";
      this.name === "" ? (errMsg += "姓名不能为空, ") : "";
      this.username === "" ? (errMsg += "用户名不能为空, ") : "";
      this.password === "" ? (errMsg += "密码不能为空, ") : "";
      this.phone === "" ? (errMsg += "联系方式不能为空, ") : "";
      this.group_id === "" ? (errMsg += "分组名不能为空, ") : "";

      // 验证下密码的长度, 必须为数字和字母组合
      let patternNum = /\d+/;
      let patternAlphabet = /[a-z]+/i;
      let isOk =
        patternAlphabet.test(this.password) &&
        patternNum.test(this.password) &&
        this.password.length >= 6;
      if (!isOk) {
        errMsg += "请输入 6 位及以上的数字和字母组合";
      }
      return errMsg;
    },
    handleOpen() {
      this.name = "";
      this.username = "";
      this.password = "";
      this.phone = "";
      this.qq = "";
      this.group_id = "";
      this.dialogFormVisible = true;
    },
    // 新增用户
    handleAddUser() {
      // 验证必填
      let err = this.handleCheckIsNull();
      if (err !== "") {
        this.$message({ type: "error", message: err });
        return false;
      }
      let reqData = {
        name: this.name,
        username: this.username,
        password: md5(this.password),
        phone: this.phone,
        qq: this.qq,
        status: this.status,
        role_id: this.role_id,
        group_id: this.group_id,
      };
      this.AXIOS.post("/mycrmapi/user/add", reqData)
        .then((resp) => {
          // console.log(resp)
          let statusCode = resp.data.status;
          if (statusCode === 1) {
            this.$message({ type: "success", message: "新增成功" });
            this.dialogFormVisible = false; // 关闭对话框
            // 调用父组件中的 handleInitUserListData, 刷新 list 数据
            this.$parent.handleInitUserListData();
          } else {
            this.$message({ type: "error", message: resp.data.msg });
          }
        })
        .catch((err) => {
          this.$message({ type: "error", message: err });
        });
    },
    handelInitInfo() {
      // 获取角色
      this.AXIOS.get("/mycrmapi/user/getRoleInfo")
        .then((resp) => {
          // console.log(resp.data.data)
          this.role_name_options = resp.data.data;
        })
        .catch((err) => {
          console.log(err);
        });

      // 获取分组名
      this.AXIOS.get("/mycrmapi/user/getGroupInfo")
        .then((resp) => {
          console.log(resp.data.data);
          this.group_id_options = resp.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

  mounted() {
    this.handelInitInfo();
  },
};
</script>

<style scoped>
</style>
